<script setup lang="ts"></script>

<template>
  <view>
    <!--    会员消费 start -->
    <view class="mt-3 rounded-xl bg-white py-[10px]">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="会员消费" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
      <view class="px-[15px] mt-1">
        <view class="flex justify-between">
          <wd-text text="会员/非会员" color="#333"></wd-text>
          <wd-text text="按营业额统计占比" size="12px"></wd-text>
        </view>
        <view>
          <wd-progress :percentage="80" hide-text color="#FD662E" />
          <view class="mt-1 flex">
            <view class="flex items-center">
              <view class="w-[6px] h-[6px] rounded-full bg-[#FD662E] mr-1"></view>
              <wd-text text="会员 80%" color="#333"></wd-text>
            </view>
            <view class="flex items-center ml-6">
              <view class="w-[6px] h-[6px] rounded-full bg-[#FEA22B] mr-1"></view>
              <wd-text text="非会员 20%" color="#333"></wd-text>
            </view>
          </view>
        </view>
        <view class="grid grid-cols-2 gap-3 my-4">
          <view
            class="h-[180px] border-border border-1 border-solid rounded-md p-4 box-border flex flex-col justify-around"
          >
            <view class="flex flex-col">
              <wd-text text="会员营业额(元)" color="#333" size="14px"></wd-text>
              <wd-text text="0.00" color="#333" size="16px"></wd-text>
            </view>
            <view class="flex flex-col">
              <wd-text text="折前人均(元)" color="#333" size="14px"></wd-text>
              <wd-text text="0.00" color="#333" size="16px"></wd-text>
            </view>
          </view>
          <view
            class="h-[180px] border-border border-1 border-solid rounded-md p-4 box-border flex flex-col justify-around"
          >
            <view class="flex flex-col">
              <wd-text text="非会员营业额(元)" color="#333" size="14px"></wd-text>
              <wd-text text="0.00" color="#333" size="16px"></wd-text>
            </view>

            <view class="flex flex-col">
              <wd-text text="折前人均(元)" color="#333" size="14px"></wd-text>
              <wd-text text="0.00" color="#333" size="16px"></wd-text>
            </view>
          </view>
        </view>
        <wd-text text="会员波动" size="14px" color="#333"></wd-text>
      </view>
      <view class="mt-4">
        <wd-cell-group border>
          <wd-cell title="新增会员" value="0 人">
            <template #icon>
              <view class="mr-2">
                <wd-icon name="picture" />
              </view>
            </template>
          </wd-cell>
          <wd-cell title="注销会员" value="0 人">
            <template #icon>
              <view class="mr-2">
                <wd-icon name="picture" />
              </view>
            </template>
          </wd-cell>
        </wd-cell-group>
      </view>
    </view>
    <!--    会员消费 end -->
    <!--    会员综合统计 start-->
    <view class="mt-3 rounded-xl bg-white py-[10px]">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="会员综合统计" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
      <view class="px-[15px] mt-1">
        <view>
          <view class="flex items-center">
            <view class="w-[3px] h-[16px] bg-primary inline-block mr-1"></view>
            <wd-text text="会员消费" color="#333" size="14px"></wd-text>
          </view>
          <view class="pl-3">
            <view class="flex justify-between py-2">
              <wd-text text="会员消费笔数" color="#333" size="14px" />
              <wd-text text="0笔" color="#333" size="14px" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--    会员综合统计 end-->
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-progress) {
  height: 12px;
}
:deep(.wd-progress__outer) {
  height: 10px;
  background: #fea22b;
  border-radius: 5px;
}
</style>
